<template>
    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
        <el-tab-pane
                v-for="item in editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
        >

<!--            {{item.content}}-->

        </el-tab-pane>
    </el-tabs>
</template>

<script>
    export default {
        name: "Tabs",
        // data() {
        //     return {
        //         editableTabsValue: 'Desktop',
        //         editableTabs: [
        //             {
        //                 title: '首页',
        //                 name: 'Desktop',
        //                 content: 'Tab 1 content'
        //             }
        //         ]
        //     }
        // },
        computed: {
            editableTabs: {
                get() {
                    console.log("getter")
                    return this.$store.state.menus.editableTabs;
                },
                set() {
                    console.log("setter")

                }
            },
            editableTabsValue: {
                get() {
                    return this.$store.state.menus.editableTabsValue;
                },
                set() {

                }
            }
        },
        methods: {
            addTab(targetName) {
                let newTabName = targetName;
                this.editableTabs.push({
                    title: 'New Tab',
                    name: newTabName,
                    content: 'New Tab content'
                });
                this.editableTabsValue = newTabName;
            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            }
        }
    }
</script>

<style scoped>

</style>